<template>
  <el-row>
    <el-col :span="22">
      <slot></slot>
      <el-button v-if="isNeedRepeat" @click="showRepeat">重复数据</el-button>
    </el-col>
    <el-col v-if="rightType" :span="2" style="text-align: right">
      <el-button v-if="rightType=='help'" text plain icon="QuestionFilled" style="background: none" @click="open">帮助</el-button>
      <slot v-if="rightType=='custom'" name="rightBtn"></slot>
    </el-col>
  </el-row>
</template>
<script setup lang="ts">
import { ElMessageBox } from "element-plus";

interface BtnProps {
  help?: {
    name: string;
    desc: string[];
  };
  rightType?: string;
  isNeedRepeat?: boolean;
}
const props = withDefaults(defineProps<BtnProps>(), {
  rightType: "",
  isNeedRepeat: false
});

//打开帮助
const open = () => {
  let help = props.help;
  if (help) {
    let con = '<div class="help_alert">';
    help.desc.forEach((el: string) => {
      con = con + `<p>${el}</p>`;
    });
    con = con + "<div>";
    ElMessageBox.alert(con, help.name, {
      dangerouslyUseHTMLString: true,
      confirmButtonText: "关闭"
    });
  }
};
const showRepeat = () => {};
</script>
